@import (reference) 'config';
@import (reference) '../../../app/less/typography';

w-tabs.inner .titles-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 49px;
  box-sizing: border-box;
  padding: 0 20px;
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: @color-disabled-100;
    top: 0;
    left: 0;
  }

  &:after {
    top: auto;
    bottom: 0;
  }

  .title {
    min-height: auto;
    padding: 0;
    .body-2();
    color: @color-info-500;
    display: block;
    border: 1px solid transparent;
    box-sizing: border-box;
    line-height: 49px;
    margin: 0 20px;
    position: relative;
    z-index: 1;

    &:not(.active) {
      cursor: pointer;
    }

    &:hover {
      border-bottom: 1px solid @color-info-500;
    }

    &.active {
      color: @color-submit-400;
      border-bottom: 1px solid @color-submit-400;
      position: relative;
      &:hover {
        border-bottom-color: 1px solid @color-submit-400;
      }
    }
  }
}

w-tabs.header {
  width: 100%;
  height: 100%;

  .tab-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .tab-body-wrap {
    max-height: calc(90vh ~'- 60px');
    overflow: auto;
    height: 100%;

    .tab-tem {
      height: 100%;
      box-sizing: border-box;
      position: relative;
    }
  }

  .titles-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    padding: 0 40px;
    z-index: 10;
    height: 60px;
    background: @color-white;
    margin: 0;

    &:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: @color-disabled-100;
      top: auto;
      bottom: 0;
      left: 0;
    }

    .title {
      .headline-2();
      line-height: 30px;
      padding: 20px 0 10px;
      margin: 0 40px 0 0;
      color: @color-info-500;
      min-height: 60px;
      cursor: pointer;
      position: relative;

      &.active {
        color: @color-submit-400;

        &::after {
          position: absolute;
          z-index: 1;
          content: '';
          width: 100%;
          height: 1px;
          display: block;
          bottom: 0;
          background: @color-submit-400;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  w-tabs .titles-wrap {
    padding: 0;
  }
}

@media screen and (max-width: 540px) {
  w-confirm-gateway-transaction,
  w-confirm-transaction {
    w-tabs .titles-wrap {
      margin: 0 -20px;
      width: calc(100% ~'+ 40px');
    }
  }

  w-tabs.header {
    .tab-body-wrap {
      max-height: none;
    }

    .titles-wrap {
      width: 100%;
      padding: 0 20px;
      margin: 0;

      .title {
        .body-2();
        margin: 0;
        margin-right: 20px;
        font-family: @font-roboto-medium;
        color: @color-info-500;
        padding: 30px 0 0;
        position: relative;
        min-height: auto;

        &.active {
          color: @color-submit-400;
        }
      }
    }

    .tab-body-wrap .tab-tem {
      padding: 20px 0 0;
      max-height: 100%;
    }
  }
}
